<template>
  <div class="btnWapper">
    <button @click="handleClick" :disabled="!isValid" :class="isValid ? '':'col_c0'">{{btnTxt}}</button>
  </div>
</template>

<script>
export default {
    props:['btnTxt','isValid'],
    methods:{
       handleClick(){
           this.$emit('btnClicked');
       }
    }
}
</script>

<style lang="less" scoped>
.btnWapper{
    display: flex;
    //margin: 14.722vw 0;
    margin:5.556vw 0;//20px
    padding:0 6.667vw;
    text-align: center;
    button{
        flex:1;
        height: 13.889vw;
        background-color: #ffc0cb;
        color: #fff;
        border-radius: 25px;
        font-size:5vw;
    }
}
.col_f2{
  color:#f2f2f2;
}
.col_c0{
  background-color:#c0c0c0 !important;
}
</style>